<template>
    <div class="sildeBox">
      <div v-if="playerCan" class="videoBox" @click="pauseVideo">
        <video
          height="300"
          ref="videoPlayer"
          class="videoPlayer"
          @error="videoError"
          @canplay="canplay"
          :src="info.video_url"
          loop
          @timeupdate="timeUpdate"
        >
          <source :src="info.video_url"></source>
        </video>
      </div>
      <p v-else="!playerCan" class="videoPlayerDisable">
        视频不可播放，请刷新重试
      </p>
      <!--  标题开始    -->
      <div class="contentBox">
        <div class="titleBox" v-text="info.title"></div>
      </div>
      <!--  标题结束    -->
      <!--  进度条开始    -->
      <div v-show="playerCan" class="progressBarBox">
        <div class="progressBar" :style="progressRate"></div>
      </div>
      <!--  进度条结束    -->
      <!--  播放按钮开始    -->
      <div @click="playVideo" v-show="playerCan && !playing" class="playerBtnBox">
        <img class="playBtn" :src="playBtnImg" alt="">
      </div>
      <!--  播放按钮结束    -->
    </div>
</template>

<script>
export default {
  name: "myVideo",
  components:{},
  props:{
    info:Object
  },
  data(){
    return {
      playerCan:true,//是否可以播放
      playing:false, //是否真正在播放
      duration:0,//视频总时长
      currentTime:0,//视频当前播放所在时间
      playBtnImg:require('../assets/img/player.png'),//播放按钮
    }
  },
  computed:{
    progressRate(){
      let rate = this.currentTime / this.duration * 100;
      return {
        width:rate+'%'
      }
    }
  },
  methods:{
    videoError(){ //视频加载出错时
      this.playerCan = false;
    },
    canplay(){ //判断视频是否可播放
      this.playerCan = true;
      this.duration = this.$refs.videoPlayer.duration;
    },
    playVideo(){ //播放视频
      this.$refs.videoPlayer.play();
      this.playing = true;
    },
    pauseVideo(){ //暂停视频
      this.$refs.videoPlayer.pause();
      this.playing = false;
    },
    reloadVideo(){ //重新加载视频
      this.$refs.videoPlayer.load();
      this.playing = false;
    },
    timeUpdate(){  //在音频/视频（audio/video）的播放位置发生改变时触发
      this.currentTime = this.$refs.videoPlayer.currentTime
    }
  }
}
</script>

<style scoped>
  .sildeBox{
    width: 100%;
    height: 100vh;
    position: relative;
  }
  .videoBox{
    width: 100%;
    position: relative;
  }
  .videoPlayer{
    width: 100%;
    height: 100vh;
  }
  .videoPlayerDisable{
    position: absolute;
    left: 0;top: 0;
    width: 100%;
    height: 100vh;
    font-size: 1.8rem;
    color: #ff0000;
    text-align: center;
    line-height: 100vh;
    z-index: 999;
  }
  .playerBtnBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;margin: auto;
    background: transparent;
    z-index: 99;
  }
  .playBtn{
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 5rem;
  }
  .progressBarBox{
    width: 100%;
    height: 0.15rem;
    border-radius: 0.2rem;
    position: absolute;
    bottom: 5.2rem;left: 0;
    background: #cccccc;
    z-index: 9;
  }
  .progressBar{
    height: 0.15rem;
    border-radius: 0.2rem;
    background: #333333;
  }
  .contentBox{
    position: absolute;
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    bottom: 0;left: 0;
    z-index: 10;
    color: #ffffff;
    background: #000000;
    padding: 1rem;
  }
  .titleBox{
    width: 100%;
    line-height: 3rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp:1;
    font-size: 1.6rem;
    font-weight: 600;
    /* text-align: center; */
  }
</style>
